<template>
	<view class="expert-detail-container">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item" @click="goShopCar">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main-content">
			<!-- 左侧专家信息区域 -->
			<view class="left-column">
				<!-- 专家信息卡片 -->
				<view class="expert-profile-card">
					<view class="expert-profile-header">
						<image :src="currentExpert.avatar" class="expert-avatar"></image>
						<view class="expert-info">
							<text class="expert-name">{{ currentExpert.name }}</text>
							<text class="expert-title">{{ currentExpert.title }}</text>
							<button class="follow-btn" :class="{ 'followed': isFollowed }" @click="toggleFollow">
								{{ isFollowed ? '已关注' : '+ 关注' }}
							</button>
						</view>
					</view>

					<view class="expert-stats">
						<view class="stat-item">
							<text class="stat-count">{{ currentExpert.articles }}</text>
							<text class="stat-label">文章</text>
						</view>
						<view class="stat-item">
							<text class="stat-count">{{ currentExpert.followers }}</text>
							<text class="stat-label">粉丝</text>
						</view>
						<view class="stat-item">
							<text class="stat-count">{{ currentExpert.likes }}</text>
							<text class="stat-label">获赞</text>
						</view>
					</view>
				</view>

				<!-- 专家简介 -->
				<view class="expert-bio-section">
					<view class="section-title">
						<text class="title-text">个人简介</text>
					</view>
					<text class="expert-bio">{{ currentExpert.bio }}</text>
				</view>

				<!-- 专家专长区域 -->
				<view class="expert-specialties-section">
					<view class="section-title">
						<text class="title-text">专业特长</text>
					</view>
					<view class="specialty-tags">
						<text v-for="(specialty, index) in currentExpert.specialties" :key="index"
							class="specialty-tag">{{ specialty }}</text>
					</view>
				</view>

				<!-- 咨询按钮 (在小屏幕时显示) -->
				<view class="consult-btn-container mobile-only">
					<button class="consult-btn" @click="consultExpert">向专家咨询</button>
				</view>
			</view>

			<!-- 右侧文章列表区域 -->
			<view class="right-column">
				<!-- 专家文章列表 -->
				<view class="expert-articles-section">
					<view class="section-title">
						<text class="title-text">专家文章</text>
					</view>

					<view v-for="(article, index) in currentExpertArticles" :key="index" class="article-card"
						@click="goToArticleDetail(article.id)">
						<view class="article-content">
							<text class="article-title">{{ article.title }}</text>
							<text class="article-summary">{{ article.summary }}</text>
							<view class="article-meta">
								<text class="article-date">{{ article.date }}</text>
								<view class="article-stats">
									<text class="article-views">👁️ {{ article.views }}</text>
									<text class="article-likes">👍 {{ article.likes }}</text>
									<text class="article-comments">💬 {{ article.comments }}</text>
								</view>
							</view>
						</view>
						<image v-if="article.image" :src="article.image" class="article-image"></image>
					</view>

					<view v-if="loadingMore" class="loading-more">
						<text>加载中...</text>
					</view>

					<view v-if="currentExpertArticles.length === 0" class="no-articles">
						<text>暂无文章</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 咨询按钮 (在大屏幕时显示) -->
		<!-- <view class="consult-btn-container desktop-only">
			<button class="consult-btn" @click="consultExpert">向专家咨询</button>
		</view> -->
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				expertId: null,
				isFollowed: false,
				loadingMore: false,
				allExperts: [{
						id: 1,
						name: '洪医生',
						title: '宠物营养学专家',
						avatar: '/static/forum/doctornv.png',
						bio: '毕业于北京农业大学兽医学院，从事宠物营养研究15年，拥有多年临床经验。致力于研究和推广科学的宠物饮食方案，曾参与多项宠物食品安全标准的制定工作。著有《宠物科学喂养指南》《猫咪营养全书》等多部畅销书籍。',
						specialties: ['宠物营养配方', '特殊疾病饮食', '猫犬均衡饮食', '食品安全评估'],
						articles: 42,
						followers: 3568,
						likes: 12653
					},
					{
						id: 2,
						name: '金教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png',
						bio: '北京动物医学研究院教授，美国宠物行为学会认证专家。专注研究犬猫行为习性及异常行为矫正20余年，擅长解决宠物分离焦虑、攻击性行为等心理问题。开创"金氏行为疗法"，帮助上万只问题行为宠物回归正常生活。',
						specialties: ['犬猫行为矫正', '分离焦虑治疗', '攻击性行为干预', '幼犬社会化训练'],
						articles: 36,
						followers: 4125,
						likes: 9876
					},
					{
						id: 3,
						name: '刘教授',
						title: '宠物皮肤病专家',
						avatar: '/static/forum/doctorna.png',
						bio: '上海兽医学院博士，欧洲兽医皮肤病学会会员。从事宠物皮肤病诊疗工作18年，对过敏性皮炎、自身免疫性皮肤病等疑难杂症有独特见解和丰富经验。主持研发多款宠物皮肤护理产品，获国家专利3项。',
						specialties: ['过敏性皮炎', '真菌感染', '自身免疫性皮肤病', '耳部疾病'],
						articles: 28,
						followers: 2897,
						likes: 8432
					},
					{
						id: 4,
						name: '竺教授',
						title: '宠物外科手术专家',
						avatar: '/static/forum/doctorna.png',
						bio: '哈尔滨兽医大学博士，美国康奈尔大学访问学者。专注于小动物骨科及软组织外科手术，尤其擅长微创手术和神经外科手术。曾成功完成国内首例犬只3D打印椎体置换手术，发表学术论文30余篇。',
						specialties: ['骨科手术', '神经外科手术', '微创腔镜技术', '肿瘤外科'],
						articles: 33,
						followers: 3210,
						likes: 10254
					},
					{
						id: 5,
						name: '郑教授',
						title: '宠物繁育遗传学专家',
						avatar: '/static/forum/doctorna.png',
						bio: '中国农业大学动物科学学院教授，长期从事宠物遗传疾病研究与优良品种选育工作。参与制定多项国家宠物繁育标准，对纯种犬猫的遗传病筛查和品种改良有深入研究。现任中国小动物繁育协会副会长。',
						specialties: ['遗传病筛查', '科学繁育指导', '品种鉴定', '产前产后护理'],
						articles: 25,
						followers: 2645,
						likes: 7823
					}
				],
				expertArticles: {
					1: [{
							id: 101,
							title: '猫咪的科学喂养指南',
							summary: '针对不同年龄段的猫咪，如何选择合适的食物和制定科学的喂养计划。文章详细介绍了从幼猫到老年猫的营养需求变化及喂食注意事项。',
							date: '2025-03-15',
							views: 2356,
							likes: 483,
							comments: 96,
							image: '/static/forum/mmwy.jpg'
						},
						{
							id: 102,
							title: '常见宠物营养误区解析',
							summary: '纠正饲养宠物过程中常见的营养误区，避免因错误喂养导致的健康问题。特别针对生骨肉、纯素饮食等争议话题进行科学解读。',
							date: '2025-03-02',
							views: 1892,
							likes: 362,
							comments: 78,
							image: '/static/forum/yswq.jpg'
						},
						{
							id: 103,
							title: '如何为老年犬调整饮食',
							summary: '随着狗狗年龄的增长，它们的营养需求也会发生变化，本文介绍如何为老年犬调整饮食结构，预防和缓解老年疾病。',
							date: '2025-02-18',
							views: 1567,
							likes: 294,
							comments: 61
						}
					],
					2: [{
							id: 201,
							title: '解读犬只分离焦虑的行为表现与解决方案',
							summary: '详细分析犬只分离焦虑的成因、表现形式及系统化的治疗方案。包含循序渐进的训练步骤和环境调整建议。',
							date: '2025-03-20',
							views: 2145,
							likes: 427,
							comments: 85,
							image: '/static/forum/lnys.jpg'
						},
						{
							id: 202,
							title: '猫咪异常行为背后的心理密码',
							summary: '解析猫咪的标记行为、攻击性行为和强迫症行为背后的心理原因，提供行为干预的实用技巧和方法。',
							date: '2025-02-28',
							views: 1756,
							likes: 341,
							comments: 72
						},
						{
							id: 203,
							title: '正确社会化训练让幼犬健康成长',
							summary: '幼犬社会化的黄金期如何把握，详解8-16周龄幼犬的社会化训练要点及常见误区，帮助养成健康性格。',
							date: '2025-02-05',
							views: 1893,
							likes: 358,
							comments: 67,
							image: '/static/forum/shxl.jpg'
						}
					],
					3: [{
							id: 301,
							title: '宠物常见过敏性皮炎的诊断与家庭护理',
							summary: '介绍宠物过敏原识别方法、过敏性皮炎的症状表现，以及科学的家庭护理和治疗方案，减轻宠物瘙痒困扰。',
							date: '2025-03-12',
							views: 1823,
							likes: 315,
							comments: 64,
							image: '/static/forum/gm.jpg'
						},
						{
							id: 302,
							title: '宠物真菌感染全方位防治指南',
							summary: '详解猫癣、皮肤癣等常见真菌性皮肤病的传播途径、症状识别、治疗方法及家庭环境消毒措施。',
							date: '2025-02-25',
							views: 1567,
							likes: 276,
							comments: 58
						}
					],
					4: [{
							id: 401,
							title: '宠物骨折的急救与治疗新进展',
							summary: '介绍宠物骨折的紧急处理要点、现代微创手术技术及术后康复训练方案，帮助宠物快速恢复健康活动能力。',
							date: '2025-03-25',
							views: 1692,
							likes: 328,
							comments: 56,
							image: '/static/forum/gz.jpg'
						},
						{
							id: 402,
							title: '宠物神经系统疾病的外科治疗选择',
							summary: '解析椎间盘突出、脑肿瘤等神经系统疾病的外科手术指征、风险评估和最新手术技术进展。',
							date: '2025-03-08',
							views: 1435,
							likes: 287,
							comments: 49
						},
						{
							id: 403,
							title: '微创手术在宠物医疗中的应用前景',
							summary: '全面介绍宠物微创腔镜技术的发展历程、适应症及优势，分享典型病例的治疗效果和术后护理要点。',
							date: '2025-02-15',
							views: 1328,
							likes: 265,
							comments: 47,
							image: '/static/forum/sh.jpg'
						}
					],
					5: [{
							id: 501,
							title: '纯种犬常见遗传疾病的筛查与防控',
							summary: '针对不同犬种的高发遗传疾病，介绍先进的基因检测技术和科学的繁育策略，降低疾病发生率。',
							date: '2025-03-18',
							views: 1437,
							likes: 256,
							comments: 51,
							image: '/static/forum/CZ.jpg'
						},
						{
							id: 502,
							title: '科学选择优质种公种母的标准与方法',
							summary: '从外貌特征、性格、健康状况和遗传背景等多方面，详解繁育用犬猫的选择标准和评估体系。',
							date: '2025-02-20',
							views: 1246,
							likes: 218,
							comments: 43
						}
					]
				}
			}
		},
		computed: {
			currentExpert() {
				const expert = this.allExperts.find(expert => expert.id === this.expertId) || this.allExperts[0];
				return expert;
			},
			currentExpertArticles() {
				return this.expertArticles[this.expertId] || [];
			}
		},
		mounted() {
			this.expertId = getApp().globalData.currentDoctorId || 1;

			console.log('当前加载的专家ID:', this.expertId);
		},
		onReachBottom() {
			// 滚动到底部加载更多文章
			this.loadMoreArticles();
		},
		methods: {
			toggleFollow() {
				this.isFollowed = !this.isFollowed;
				// 实际应用中应该调用关注/取消关注API
				uni.showToast({
					title: this.isFollowed ? '已关注' : '已取消关注',
					icon: 'none'
				});
			},
			goToArticleDetail(articleId) {
				// 跳转到文章详情页
				uni.navigateTo({
					url: '/pages/article/detail?id=' + articleId
				});
			},
			consultExpert() {
				// 跳转到咨询页面
				uni.navigateTo({
					url: '/pages/consult/chat?expertId=' + this.currentExpert.id + '&expertName=' + this
						.currentExpert.name
				});
			},
			loadMoreArticles() {
				// 确认当前专家还有更多文章可以加载
				const currentArticles = this.expertArticles[this.expertId] || [];
				if (currentArticles.length <= 3) {
					return; // 如果文章少于或等于3篇，不加载更多
				}

				this.loadingMore = true;

				// 模拟网络请求延迟
				setTimeout(() => {
					// 根据专家ID添加更多文章数据
					const moreArticles = [];

					if (this.expertId === 1) {
						moreArticles.push({
							id: 104,
							title: '宠物食品添加剂的真相',
							summary: '深入分析市面上宠物食品中常见添加剂的作用及安全性。解读食品标签背后的信息，帮助主人做出明智选择。',
							date: '2025-02-05',
							views: 1328,
							likes: 251,
							comments: 47,
							image: '/static/pet-test.png'
						}, {
							id: 105,
							title: '自制宠物零食的营养指南',
							summary: '如何在家制作健康且营养均衡的宠物零食，让您的爱宠吃得更健康。附有多种适合不同宠物的食谱及制作方法。',
							date: '2025-01-22',
							views: 1104,
							likes: 218,
							comments: 39
						});
					} else if (this.expertId === 2) {
						moreArticles.push({
							id: 204,
							title: '多猫家庭和谐相处的秘诀',
							summary: '探讨多猫家庭常见的领地冲突问题，提供空间布局、资源分配和行为引导的实用策略，创造和谐的多猫环境。',
							date: '2025-01-18',
							views: 1452,
							likes: 287,
							comments: 59,
							image: '/static/pet-test.png'
						});
					} else if (this.expertId === 3) {
						moreArticles.push({
							id: 303,
							title: '季节性皮肤病防治攻略',
							summary: '针对春夏秋冬不同季节多发的宠物皮肤问题，提供预防措施和护理方案，全年保护宠物皮肤健康。',
							date: '2025-02-08',
							views: 1335,
							likes: 241,
							comments: 52,
							image: '/static/pet-test.png'
						}, {
							id: 304,
							title: '宠物耳部疾病的家庭检查与护理',
							summary: '教您识别宠物耳部感染的早期信号，掌握正确的耳部清洁方法和用药技巧，预防慢性耳病发生。',
							date: '2025-01-15',
							views: 1183,
							likes: 209,
							comments: 45
						});
					} else if (this.expertId === 4) {
						moreArticles.push({
							id: 404,
							title: '宠物肿瘤外科治疗策略',
							summary: '介绍常见宠物肿瘤的外科处理原则、手术方式选择及术后监测要点，提高宠物肿瘤治疗的成功率。',
							date: '2025-01-28',
							views: 1257,
							likes: 231,
							comments: 43,
							image: '/static/pet-test.png'
						});
					} else if (this.expertId === 5) {
						moreArticles.push({
							id: 503,
							title: '犬猫妊娠期的科学护理方案',
							summary: '全面介绍母犬母猫妊娠各阶段的营养需求、运动管理、产前准备及可能出现的异常情况处理方法。',
							date: '2025-01-25',
							views: 1158,
							likes: 197,
							comments: 38,
							image: '/static/pet-test.png'
						}, {
							id: 504,
							title: '新生幼犬幼猫的健康评估与早期干预',
							summary: '详解新生宠物的健康检查要点、先天缺陷识别及早期干预措施，确保幼崽健康成长。',
							date: '2025-01-10',
							views: 1062,
							likes: 183,
							comments: 35
						});
					}

					if (moreArticles.length > 0) {
						// 添加到当前专家的文章列表中
						this.expertArticles[this.expertId] = [...(this.expertArticles[this.expertId] || []), ...
							moreArticles
						];
					}

					this.loadingMore = false;
				}, 1000);
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goShopCar() {
				uni.switchTab({
					url: '/pages/shop/shopCar'
				})
			},
		}
	}
</script>

<style scoped>
	.expert-detail-container {
		min-height: 100vh;
		/* max-width: 1400px; */
		margin: 0 auto;
		padding-bottom: 80px;
	}

	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}


	.main-content {
		max-width: 1400px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20px;
		margin: auto;
		margin-top: 270rpx;
		gap: 30px;
	}

	.left-column {
		flex: 1;
		min-width: 300px;
	}

	.right-column {
		flex: 2;
		min-width: 300px;
	}

	.expert-profile-card {
		background-color: white;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 30px;
	}

	.expert-profile-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.expert-avatar {
		width: 120px;
		height: 120px;
		border-radius: 60px;
		margin-right: 25px;
		object-fit: cover;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.expert-info {
		flex: 1;
		position: relative;
	}

	.expert-name {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 8px;
		display: block;
	}

	.expert-title {
		font-size: 16px;
		color: #666;
		margin-bottom: 12px;
		display: block;
	}

	.expert-stats {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #eee;
		padding-top: 20px;
		margin-top: 10px;
	}

	.stat-item {
		text-align: center;
	}

	.stat-count {
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 5px;
	}

	.stat-label {
		font-size: 14px;
		color: #999;
		display: block;
	}

	.follow-btn {
		background-color: #F9CB43;
		color: white;
		font-size: 14px;
		padding: 6px 20px;
		border-radius: 20px;
		border: none;
		transition: background-color 0.3s;
	}

	.follow-btn:hover {
		background-color: #e8b932;
		cursor: pointer;
	}

	.followed {
		background-color: #e6e6e6;
	}

	.followed:hover {
		background-color: #d9d9d9;
	}

	.expert-bio-section,
	.expert-specialties-section {
		background-color: white;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 30px;
	}

	.section-title {
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 18px;
		font-weight: bold;
		position: relative;
		padding-left: 15px;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 5px;
		height: 18px;
		width: 4px;
		background-color: #F9CB43;
		border-radius: 2px;
	}

	.expert-bio {
		font-size: 16px;
		color: #333;
		line-height: 1.7;
	}

	.specialty-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.specialty-tag {
		background-color: #f5f5f5;
		color: #555;
		padding: 8px 16px;
		border-radius: 20px;
		font-size: 14px;
		display: inline-block;
	}

	.expert-articles-section {
		background-color: white;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.article-card {
		display: flex;
		padding: 20px 0;
		border-bottom: 1px solid #eee;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.article-card:hover {
		transform: translateY(-3px);
	}

	.article-card:last-child {
		border-bottom: none;
	}

	.article-content {
		flex: 1;
		margin-right: 20px;
	}

	.article-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
		color: #333;
	}

	.article-summary {
		font-size: 14px;
		color: #666;
		margin-bottom: 15px;
		display: block;
		line-height: 1.6;
	}

	.article-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		color: #999;
	}

	.article-stats {
		display: flex;
	}

	.article-views,
	.article-likes {
		margin-right: 15px;
	}

	.article-image {
		width: 160px;
		height: 120px;
		border-radius: 8px;
		object-fit: cover;
	}

	.loading-more {
		text-align: center;
		padding: 20px;
		color: #999;
		font-size: 14px;
	}

	.no-articles {
		text-align: center;
		padding: 40px 0;
		color: #999;
		font-size: 16px;
	}

	.consult-btn-container {
		background-color: white;
		padding: 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.desktop-only {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: none;
	}

	.consult-btn {
		background-color: #F9CB43;
		color: white;
		font-size: 16px;
		padding: 12px 30px;
		border-radius: 25px;
		border: none;
		width: 100%;
		max-width: 400px;
		transition: background-color 0.3s;
	}

	.consult-btn:hover {
		background-color: #e8b932;
		cursor: pointer;
	}

	/* 响应式布局 */
	/* 响应式布局 */
	@media screen and (min-width: 992px) {
		.main-content {
			flex-wrap: nowrap;
		}

		.left-column {
			flex: 1;
			max-width: 350px;
		}

		.right-column {
			flex: 2;
		}

		.desktop-only {
			display: block;
		}

		.mobile-only {
			display: none;
		}
	}

	@media screen and (max-width: 991px) {
		.main-content {
			flex-direction: column;
		}

		.left-column,
		.right-column {
			width: 100%;
		}

		.desktop-only {
			display: none;
		}

		.mobile-only {
			display: block;
			margin-bottom: 30px;
		}

		.expert-profile-header {
			flex-direction: column;
			text-align: center;
		}

		.expert-avatar {
			margin-right: 0;
			margin-bottom: 15px;
		}

		.expert-stats {
			padding: 15px 0;
		}
	}

	@media screen and (max-width: 768px) {
		.article-card {
			flex-direction: column;
		}

		.article-content {
			margin-right: 0;
			margin-bottom: 15px;
		}

		.article-image {
			width: 100%;
			height: 180px;
		}

		.expert-title,
		.expert-name {
			text-align: center;
		}

		.follow-btn {
			margin: 0 auto;
			display: block;
		}
	}

	@media screen and (max-width: 480px) {
		.main-content {
			padding: 15px;
		}

		.expert-profile-card,
		.expert-bio-section,
		.expert-specialties-section,
		.expert-articles-section {
			padding: 20px;
			margin-bottom: 20px;
		}

		.expert-avatar {
			width: 100px;
			height: 100px;
		}

		.expert-name {
			font-size: 20px;
		}

		.article-title {
			font-size: 16px;
		}

		.article-summary {
			font-size: 13px;
		}

		.specialty-tag {
			padding: 6px 12px;
			font-size: 12px;
		}
	}
</style>